<!-- 添加修改地址 -->
<template>
  <view class="address-wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <view class="address-box">
        <!-- 地址表单 -->
        <u-form-item  label-width="1"  label=" " prop="shop" style="position: relative">
          <u-input class="form-items" type="select" v-model="model.shop"  placeholder="请选择店铺" @click="showSelectclick" :customStyle="styles"></u-input>
        </u-form-item>
        <u-form-item  label-width="1"   label=" " prop="serve_time">
          <u-input class="form-items"  type="select" v-model="model.serve_time" placeholder="请选择预约时间" @click="showTimesClick" :customStyle="styles"></u-input>
        </u-form-item>
        <u-form-item  label-width="1"   label=" " prop="username">
          <u-input class="form-items"  placeholder="请输入姓名" v-model="model.username" type="text" :customStyle="styles"></u-input>
        </u-form-item>
        <u-form-item label-width="1"   label=" " prop="mobile">
          <u-input class="form-items"  placeholder="请输入电话" v-model="model.mobile" type="number" :customStyle="styles"></u-input>
        </u-form-item>
      </view>
      <!-- 功能按钮 -->
      <view class="foot_box u-m-t-50 u-flex">
        <button class=" u-m-20 u-reset-button save-btn" @tap="submit">提交</button>
      </view>
    </u-form>
<!--日期选择器-->
    <u-picker v-model="showTimes" mode="time" :startTime="startDate" :endTime="endDate"  :defaultTime="model.serve_time" :params="params" :end-year="expiretime_text" @confirm="gettimes($event)" confirm-color="#000" :default-time="model.serve_time"></u-picker>
    <!-- 店铺列表选择器 -->
    <u-picker mode="selector" v-model="showSelect" :range="shopList" :default-selector="[model.shopindex]" range-key="name"confirm-color="#000" @confirm="shopConfirm($event)"></u-picker>
  </view>
</template>

<script>
import { MAP_KEY } from '@/env.js';
import Auth from '@/shopro/permission/index.js';
export default {
  components: {},
  data() {
    return {
      showTimes:false,//时间选择器
      showSelect: false, //店铺列表
      shopList: [
      ],
      servelist_id:'',
      serve_id:'',
      styles: {
          'color': '#333',
        'padding':'10rpx',
        'border-radius':'40rpx'
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false,
        province: false,
        city: false,
        area: false,
        // 选择时间的时间戳
        timestamp: true,
      },
      model: {
        id: 0,
        username: '',
        mobile: '',
        shop: '',
        shop_id:'',
        shopindex:0,
        serve_time: '',
        is_default: false,
      },
      expiretime_text:null,
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur']
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur']
          }
        ],
        username: [
          {
            required: true,
            message: '请填写姓名',
            trigger: ['change', 'blur']
          }
        ],
        shop: [
          {
            required: true,
            message: '请选择店铺',
            trigger:  ['change', 'blur','select']
          }
        ],
        serve_time: [
          {
            required: true,
            message: '请选择预约时间',
            trigger: ['change', 'blur']
          }
        ]
      },
      errorType: ['message'],
    };
  },
  onReady() {
    this.getshop();
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    this.options = this.$Route.query;
    this.serve_id = this.options.serve_id ? this.options.serve_id : 0;
    this.expiretime_text = this.options.expiretime_text?this.options.expiretime_text:null;
    this.servelist_id = this.options.serve_list_id ? this.options.serve_list_id : 0;
    this.servelist_id && this.getServeInfo();
  },
  //computed部分
  computed: {
    startDate() {
      //限制开始时间;
      //也可以直接限定为当天日期
      var date= new Date(); return date
    },
    endDate() {
      console.log("===========this.expiretime_text",this.expiretime_text)
      return this.expiretime_text;
    }
  },
  methods: {

    //时间格式
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
      let day = date.getDate();
      let h = date.getHours()
      let m = date.getMinutes();
      if (type === 'start') {
        // year = year - 60;
        year=year;
        month=month;
        day=day;
      } else if (type === 'end') {
        year = year + 2;
        console.log(year);
      }
      month = month > 9 ? month : '0' + month;;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day} ${h}:${m}`;
    },
    bindDateChange: function(e) {
      this.checkTime = e.target.value;
      var time = new Date(this.checkTime).toString();
      var beginYear=new Date().getFullYear();
      var beginMonth=new Date().getMonth();
      var beginDate=new Date().getDate();
      var endYear=new Date(this.checkTime).getFullYear();
      var endMonth=new Date(this.checkTime).getMonth();
      var endDate=new Date(this.checkTime).getDate();
      if(beginYear==endYear){  //同年
        if(endMonth-beginMonth>3){  //月间隔超过3个月
          console.log('超过')
        }else if(endMonth-beginMonth==3){  //月间隔为3个月,比较具体日
          if(endDate>beginDate){  //结束日期日大于开始日期日
            console.log('超过')
          }else{
            console.log('不超过')
          }
        }else{
          console.log('不超过')
        }
      }else{ //不同年
        if(endYear-beginYear>1){
          console.log('超过');
        }else if(endYear-beginYear==1){
          if(beginMonth<10){  //开始年的月份小于10时,不需要跨1年
            console.log('超过');
          }else if(beginMonth+3-endMonth<12){  //月间隔大于3个月
            console.log('超过');
          }else if(beginMonth+3-endMonth==12){  //月间隔等于3个月,比较具体日
            if(endDate>beginDate){
              console.log('超过');
            }else{
              console.log('不超过')
            }
          }
        }else{
          console.log('不超过')
        }
      }

    },

    showSelectclick(){
      if(this.model.shop){
       let shopindex
        this.shopList.forEach((item,index)=>{
          if(item.name == this.model.shop){return shopindex = index}
        })
        this.model.shopindex = shopindex
      }
      this.showSelect=true
    },
    showTimesClick(){
      if(!this.model.serve_time){
        this.timestampToTime(Number(new Date()))
      }
      this.showTimes = true
    },
    gettimes(e){
      this.model.serve_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
    },
    timestampToTime(timestamp) {
      let Y ,M,D,h,m
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      console.log("===date",date)
      Y = date.getFullYear() + '-';
      M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      D = date.getDate() + ' ';
      h = date.getHours() + ':';
      m = date.getMinutes();
      this.model.serve_time = Y+M+D+h+m;
    },
    // 获取省市区
    getshop() {
      this.$https('coupons.serveshop',{
        token:uni.getStorageSync('token'), // 用户身份标识
      }).then(res => {
        if (res.code === 1) {
          this.shopList = res.data;
        }
      });
    },

    // 确认服务店铺
    shopConfirm(e) {
      let items
      this.shopList.forEach((item,index)=>{
        console.log("====es:",e[0],index)
        if(e[0]==index){
          items = item}
      })
      this.model.shop = items.name;
      this.model.shopindex = e[0];
      this.model.shop_id = items.id
    },
    // 提交
    submit() {
      this.$refs.uForm.validate(valid => {
        valid ? this.editServe() : console.log('验证失败');
      });
    },

    // 编辑添加服务
    editServe() {
      let that = this;
      that.$https(
          'coupons.addserve',
          {
            ...that.model,
            serve_id: that.serve_id,
            id:that.servelist_id,
            token:uni.getStorageSync('token'), // 用户身份标识
          },
          '保存中...'
      ).then(res => {
        if (res.code === 1) {
          uni.navigateBack({
            delta: 1
          })
        }
      });
    },

    // 预约信息
    getServeInfo() {
      const that = this;
      this.$https('coupons.serveDetail', {
        token:uni.getStorageSync('token'), // 用户身份标识
        id: that.servelist_id
      }).then(res => {
        if (res.code === 1) {
          let addressData = res.data;
          that.model.shop = addressData.shop_name;
          that.model.shop_id = addressData.shop_id;
          that.model.is_default = addressData.is_default === '1' ? true : false;
          that.model.serve_time = addressData.serve_time_text;
          that.model.mobile = addressData.mobile;
          that.model.username = addressData.username;
        }
      });
    },
  }
};
</script>

<style lang="scss">
.address-wrap{
  height: 100vh;
  background:#ffffff;
}
// 点击定位
.location-item {
  font-size: 28rpx;
  font-weight: 500;
  position: absolute;right: 10rpx;top: 20rpx;
}

// 表单
.address-box {
  background-color: #fff;
  padding: 0 30rpx;
}
.address-item {
  height: 96rpx;
  background: #fff;
  border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
  padding: 0 25rpx;

  .item-title {
    color: #333;
    font-size: 28rpx;
    white-space: nowrap;
  }
  .inp {
    color: #333;
    font-size: 28rpx;
  }
}
/deep/.u-form-item--right{
  background: #F5F5F5!important;
  padding-left: 20rpx!important;
}
/deep/.u-form-item--left__content__label{
  color: #001226;
  font-weight: bold;
}
/deep/.u-border-bottom:after{
  border-bottom:none;
}
.area-box {
  min-height: 120rpx;
  padding-bottom: 60rpx;
  background: #fff;
  padding: 30rpx 25rpx;
  .item-title {
    font-size: 28rpx;
    line-height: 28rpx;
    vertical-align: middle;
    white-space: nowrap;
  }
  .area-inp {
    color: #333;
    font-size: 28rpx;
    vertical-align: middle;
    margin-top: 8rpx;
    width: 550rpx;
  }
}
.default-box {
  height: 100rpx;
  padding: 0 25rpx;
  background: #fff;
  // margin-top: 20rpx;
  .title {
    font-size: 28rpx;
  }
  .switch {
    transform: scale(0.8);
  }
}
// 底部按钮
.foot_box {
  flex-direction: column;
  padding: 40rpx 30rpx;
  .delete-btn {
    width: 100%;
    border: 1px solid #B5B5B5;
    font-size: 28rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 70rpx;
  }
  .save-btn {
    width: 100%;
    line-height: 70rpx;
    background: #010101;
    border-radius: 40rpx;
    color: rgba(#fff, 0.9);
    padding: 10rpx 0;
  }
}
.form-items{
  border-radius: 30rpx;
}
/deep/.u-input{
  color: #333!important;
  padding:8rpx!important;

}
/deep/.u-form-item--right {
  background: #F5F5F5 !important;
  padding-left: 20rpx !important;
  border-radius: 50rpx!important;
  padding-right: 20rpx!important;
}
</style>
